<template>
	<div>
		<nav-bar-vue title="图文分享"></nav-bar-vue>
		<div class="mui-content" style="background-color:#fff">
			&nbsp;&nbsp;
			<h5 style="color:dodgerblue; display: inline-block;">慢生活</h5>
			<h5 style="color:dodgerblue; display: inline-block;">慢生活</h5>
			<h5 style="color:dodgerblue; display: inline-block;">慢生活</h5>
			<h5 style="color:dodgerblue; display: inline-block;">慢生活</h5>
			<h5 style="color:dodgerblue; display: inline-block;">慢生活</h5>
			<ul class="mui-table-view mui-grid-view">
				<li class="mui-table-view-cell mui-media mui-col-xs-6" v-for="(item, index) in images" :key="index">
					<a href="#">
						<!--<img class="mui-media-object" v-lazy="item.src" @click="open($event)">-->
						<img class="mui-media-object preview-img" :src="item.src" @click="$preview.open(index, images)">
						<div class="mui-media-body">幸福就是可以一起睡觉</div>
					</a>
				</li>
				<!--<li class="mui-table-view-cell mui-media mui-col-xs-6">
					<a href="#">
						<img class="mui-media-object" src="/src/static/img/muwu.jpg">
						<div class="mui-media-body">想要一间这样的木屋，静静的喝咖啡</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-6">
					<a href="#"><img class="mui-media-object" src="/src/static/img/cbd.jpg">
						<div class="mui-media-body">Color of SIP CBD</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-6">
					<a href="#">
						<img class="mui-media-object" src="/src/static/img/yuantiao.jpg">
						<div class="mui-media-body">静静看这世界</div>
					</a>
				</li>-->
			</ul>
		</div>
		<div class="list" v-for="(n, index) in imageList" :data-index="index">
			<img @click="open($event)" :src="n.url" width="100%" height="300">
		</div>
		<pin-lun-vue></pin-lun-vue>
	</div>
</template>

<script>
	import fancyBox from 'vue-fancybox';
	
	export default {
		data() {
			return {
				images: [{
						src: 'http://192.0.0.153:8080/static/img/a.jpg?t=1'
					},  
					{   
						src: 'http://192.0.0.153:8080/static/img/a.jpg?t=2'
					},  
					{   
						src: 'http://192.0.0.153:8080/static/img/a.jpg?t=3'
					},  
					{   
						src: 'http://192.0.0.153:8080/static/img/a.jpg?t=4'
					},  
					{   
						src: 'http://192.0.0.153:8080/static/img/a.jpg?t=5'
					},  
					{   
						src: 'http://192.0.0.153:8080/static/img/a.jpg?t=6'
					},  
					{   
						src: 'http://192.0.0.153:8080/static/img/a.jpg?t=7'
					},  
					{   
						src: 'http://192.0.0.153:8080/static/img/a.jpg?t=8'
					},  
					{   
						src: 'http://192.0.0.153:8080/static/img/a.jpg?t=9'
					},  
					{   
						src: 'http://192.0.0.153:8080/static/img/a.jpg?t=10'
					},  
					{   
						src: 'http://192.0.0.153:8080/static/img/a.jpg?t=11'
					},  
					{   
						src: 'http://192.0.0.153:8080/static/img/a.jpg?t=12'
					},  
					{   
						src: 'http://192.0.0.153:8080/static/img/a.jpg?t=13'
					},  
					{   
						src: 'http://192.0.0.153:8080/static/img/a.jpg?t=14'
					},  
					{   
						src: 'http://192.0.0.153:8080/static/img/a.jpg?t=15'
					},  
					{   
						src: 'http://192.0.0.153:8080/static/img/a.jpg?t=16'
					},  
					{   
						src: 'http://192.0.0.153:8080/static/img/a.jpg?t=17'
					},  
					{   
						src: 'http://192.0.0.153:8080/static/img/a.jpg?t=18'
					}
				],
				imageList: [{
						width: 900,
						height: 675,
						url: 'http://ocm0knkb1.bkt.clouddn.com/1-1.jpg'
					},
					{
						width: 601,
						height: 1024,
						url: 'http://ocm0knkb1.bkt.clouddn.com/1-2.jpg'
					},
					{
						width: 1024,
						height: 700,
						url: 'http://ocm0knkb1.bkt.clouddn.com/1-3.jpg'
					}
				]
			}
		},
		methods: {
			open(e) {
				console.log(this.imageList)
				fancyBox(e.target, this.imageList);
			}
		},
		created() {
			this.images.forEach((item) => {
//				item.x = 0;
//				item.y = 0;
				item.w = 600;
				item.h = 280;
			})
		}
	}
</script>

<style scoped>
	/*懒加载*/
	
	image[lazy=loading] {
		width: 40px;
		height: 300px;
		margin: auto;
	}
</style>